<template>
  <div class="container">
    <el-dialog :title="setTitle" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" size="mini" label-width="120px" class="common-dialog-height" v-loading="formLoading">
        <el-form-item label="角色名称：" prop="roleId">
          <el-input v-model="dataForm.roleId" placeholder="请输入角色名称" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="角色别名：" prop="roleName">
          <el-input v-model="dataForm.roleName" placeholder="请输入角色别名"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="roleDesc">
          <el-input v-model="dataForm.roleDesc" type="textarea" :rows="3" placeholder="请输入用户描述" maxlength="100" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="formDataSubmit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        formLoading: false,
        dialogType: '',
        dialogVisible: false,
        dataForm: {
          roleId: '',
          roleName: '',
          roleDesc: ''
        },
        dataRule: {
          roleId: [
            { required: true, message: '请输入角色名称!', trigger: 'blur' },
            { min: 2, max: 20, message: '长度为5~20个字符!', trigger: 'blur' }
          ],
          roleName: [
            { required: true, message: '请输入角色别名!', trigger: 'blur' },
            { min: 2, max: 20, message: '长度为5~20个字符!', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      setTitle() {
        const type = this.dialogType
        if (type === 'add') {
          return '新增角色'
        } else if (type === 'edit') {
          return '编辑角色'
        }
        return
      },
      inputDisabled() {
        return this.dialogType === 'edit'
      },
    },
    methods: {
      init(params) {
        this.dialogVisible = true
        this.dialogType = params.type
        if (params.type === 'edit') {
          this.formLoading = true
          this.$http.get(this.$http.adornUrl(`/sys/role/info/${params.id}`)).then(response => {
            const result = response.data
            if (result && result.code === 200) {
              const data = result.data
              this.dataForm.roleId = data.roleId
              this.dataForm.roleName = data.roleName
              this.dataForm.roleDesc = data.roleDesc
            } else {
              this.$message({message: '获取' + result.msg, type: 'error'})
            }
            this.formLoading = false
          }).catch(reason => {
            this.$message({message: reason, type: 'error'})
            this.formLoading = false
          })
        }
      },
      formDataSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tips = (this.dialogType === 'add') ? '新增' : '修改'
            const url = (this.dialogType === 'add') ? this.$http.adornUrl('/sys/role/info') : this.$http.adornUrl(`/sys/role/info/${this.dataForm.roleId}`)
            const method = (this.dialogType === 'add') ? 'post' : 'put'
            const data = this.dataForm
            this.$http({
              url: url,
              method: method,
              data: this.$http.adornData(data)
            }).then(response => {
              const result = response.data
              if (result && result.code === 200) {
                this.$emit('refreshData')
                this.dialogVisible = false
                this.$message({message: tips + result.msg, type: 'success'})
              } else {
                this.$message({message: tips + result.msg, type: 'error'})
              }
            }).catch(reason => {
              this.$message({message: reason, type: 'error'})
            })
          }
        })
      },
      closeDialog() {
        this.$refs['dataForm'].resetFields()
        this.dialogType = ''
      }
    }
  }
</script>
<style>
</style>
